import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
import { <%= chartName %> as G2plot<%= chartName %>, <%= chartName %>Options as G2plotConfig } from '@antv/g2';
      import useChart from '../hooks/useChart';
      import { getChart } from '../util';
      import { ChartRefConfig, ContainerConfig } from '../interface';
      import { ErrorBoundary } from '../base';
      import ChartLoading from '../util/createLoading';

      export interface <%= chartName %>Config extends G2plotConfig, ContainerConfig <G2plotConfig>{
          chartRef?: ChartRefConfig;
          }

          const <%= chartName %>Chart = forwardRef((props: <%= chartName %>Config, ref) => {
              const {
              chartRef,
              style = {
              height: 'inherit'
              },
              className,
              loading,
              loadingTemplate,
              errorTemplate,
              ...rest
              } = props;
              const { chart, container } = useChart<G2plot<%= chartName %>, <%= chartName %>Config>(G2plot<%= chartName
                    %>, rest);
                    useEffect(() => {
                    getChart(chartRef, chart.current);
                    }, [chart.current]);
                    useImperativeHandle(ref, () => ({
                    getChart: () => chart.current,
                    }));
                    return (
                    <ErrorBoundary errorTemplate={errorTemplate}>
                      {loading &&
                      <ChartLoading loadingTemplate={loadingTemplate} theme={props.theme} />}
                      <div className={className} style={style} ref={container} />
                    </ErrorBoundary>
                    );
                    });

                    export default <%= chartName %>Chart;